{% extends "base_tabler.html" %} {% block title %}编辑角色{% endblock %} {% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">编辑角色: {{ group.name }}</h2>
      </div>
      <div class="col-auto ms-auto d-print-none">
        <div class="btn-list">
          <a href="{% url 'role_manage' %}" class="btn btn-outline-secondary d-none d-sm-inline-block">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              class="icon icon-tabler icon-tabler-arrow-left"
              width="24"
              height="24"
              viewBox="0 0 24 24"
              stroke-width="2"
              stroke="currentColor"
              fill="none"
              stroke-linecap="round"
              stroke-linejoin="round"
            >
              <path stroke="none" d="M0 0h24v24H0z" fill="none" />
              <path d="M5 12l14 0" />
              <path d="M5 12l6 6" />
              <path d="M5 12l6 -6" />
            </svg>
            返回角色管理
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="page-body">
  <div class="container-xl">
    <div class="row row-cards">
      <div class="col-12">
        <form class="card" method="post" action="{% url 'edit_role' group.id %}">
          {% csrf_token %}
          <div class="card-header">
            <h3 class="card-title">角色信息</h3>
          </div>
          <div class="card-body">
            {% if messages %}
            <div class="alert alert-danger" role="alert">{% for message in messages %} {{ message }} {% endfor %}</div>
            {% endif %}

            <div class="mb-3">
              <label class="form-label required">角色名称</label>
              <input
                type="text"
                class="form-control"
                name="name"
                value="{{ group.name }}"
                placeholder="请输入角色名称"
                required
              />
            </div>

            <div class="mb-3">
              <label class="form-label">权限选择</label>
              <div class="row g-3">
                {% regroup permissions by content_type.app_label as app_list %} {% for app in app_list %}
                <div class="col-12">
                  <div class="card">
                    <div class="card-header">
                      <h4 class="card-title">{{ app.grouper }}</h4>
                      <div class="card-actions">
                        <a href="#" class="select-all-app" data-app="{{ app.grouper }}">全选</a> |
                        <a href="#" class="deselect-all-app" data-app="{{ app.grouper }}">取消全选</a>
                      </div>
                    </div>
                    <div class="card-body">
                      <div class="row">
                        {% for perm in app.list %}
                        <div class="col-md-4 mb-2">
                          <label class="form-check">
                            <input
                              class="form-check-input"
                              type="checkbox"
                              name="permissions"
                              value="{{ perm.id }}"
                              data-app="{{ app.grouper }}"
                              {%
                              if
                              perm.id
                              in
                              group_permissions
                              %}checked{%
                              endif
                              %}
                            />
                            <span class="form-check-label">{{ perm.name }}</span>
                          </label>
                        </div>
                        {% endfor %}
                      </div>
                    </div>
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
          </div>
          <div class="card-footer text-end">
            <button type="submit" class="btn btn-primary">保存更改</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>
{% endblock %} {% block scripts %}
<script>
  document.addEventListener("DOMContentLoaded", function () {
    // 全选/取消全选处理
    document.querySelectorAll(".select-all-app").forEach(function (btn) {
      btn.addEventListener("click", function (e) {
        e.preventDefault()
        var app = this.getAttribute("data-app")
        document.querySelectorAll('input[data-app="' + app + '"]').forEach(function (checkbox) {
          checkbox.checked = true
        })
      })
    })

    document.querySelectorAll(".deselect-all-app").forEach(function (btn) {
      btn.addEventListener("click", function (e) {
        e.preventDefault()
        var app = this.getAttribute("data-app")
        document.querySelectorAll('input[data-app="' + app + '"]').forEach(function (checkbox) {
          checkbox.checked = false
        })
      })
    })
  })
</script>
{% endblock %}
